<script setup lang="ts">
import { getFoodListUtil, getFoodTotalUtil } from '@/AGC/utils/food'
import { createFoodCollectUtil, deleteFoodCollectUtil } from '@/AGC/utils/user'
import type { FoodI, GetFoodListParamsI } from '@/types/food'
import { ElMessage } from 'element-plus'
import { onMounted, ref } from 'vue'

// 筛选条件
const filter = ref<GetFoodListParamsI>({
  time: '全部',
  name: '',
  page: 1,
  pageSize: 6,
})
// 食物总数
const foodTotal = ref<number>(0)
// 表格数据
const tableData = ref<FoodI[]>([])
// 获取食物列表 和 食物总数
const getFoodList = async () => {
  try {
    tableData.value = await getFoodListUtil(filter.value)
    foodTotal.value = await getFoodTotalUtil(filter.value)
  } catch (error) {
    Promise.reject(error)
  }
}
onMounted(() => {
  setTimeout(async () => {
    await getFoodList()
  }, 100)
})
// 搜索 --- 搜索框和时间段变化时触发的事件
const onSearch = () => {
  // 重置筛选条件
  filter.value.page = 1
  filter.value.pageSize = 6
  // 获取食物列表
  getFoodList()
}
// 改变每页条数
const changePageSize = () => {
  filter.value.page = 1
  getFoodList()
}
// 改变页码
const changePage = (page: number) => {
  filter.value.page = page
  getFoodList()
}
// 取消收藏
const cancelCollect = async (id: number) => {
  try {
    await deleteFoodCollectUtil(id)
    getFoodList()
    ElMessage.success('取消收藏成功')
  } catch (error) {
    ElMessage.error('取消收藏失败')
    Promise.reject(error)
  }
}
// 收藏食物
const onCollect = async (id: number) => {
  try {
    await createFoodCollectUtil(id)
    getFoodList()
    ElMessage.success('收藏成功')
  } catch (error) {
    ElMessage.error('收藏失败')
    Promise.reject(error)
  }
}
</script>

<template>
  <div class="page-container">
    <el-card>
      <!-- 筛选条件 -->
      <template #header>
        <div class="card-header">
          <!-- 左边 -->
          <div style="display: flex; align-items: center">
            <div style="width: 100px; margin-bottom: 4px">食物名称:</div>
            <el-input
              v-model="filter.name"
              placeholder="请输入食物名称"
              size="medium"
              clearable
              style="margin: 0 10px 0 5px"
              @keyup.enter="onSearch"
            />
            <img src="@/assets/search.png" style="width: 21px; height: auto" @click="onSearch" />
          </div>
          <!-- 右边 -->
          <div>
            <el-radio-group v-model="filter.time" @change="onSearch">
              <el-radio value="全部" size="large">全部</el-radio>
              <el-radio value="早餐" size="large">早餐</el-radio>
              <el-radio value="午餐" size="large">午餐</el-radio>
              <el-radio value="晚餐" size="large">晚餐</el-radio>
            </el-radio-group>
          </div>
        </div>
      </template>
      <!-- 表格 -->
      <el-table style="height: 392px" :data="tableData" border>
        <el-table-column label="序号" type="index" width="80" align="center" />
        <el-table-column label="食物名称" prop="name" align="center" />
        <el-table-column label="份量" prop="weight" align="center">
          <template #default="{ row }"> {{ row.weight }} {{ row.unit }} </template>
        </el-table-column>
        <el-table-column label="热量(千卡)" prop="calories" align="center" />
        <el-table-column label="蛋白质(g)" prop="protein" align="center" />
        <el-table-column label="脂肪(g)" prop="fat" align="center" />
        <el-table-column label="碳水(g)" prop="carbohydrate" align="center" />
        <el-table-column label="状态" prop="status" align="center">
          <template #default="{ row }">
            <el-tag :type="row.status == 0 ? 'warning' : 'success'">
              {{ row.status == 0 ? '未收藏' : '已收藏' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template #default="{ row }">
            <el-popconfirm
              title="确定取消收藏吗?"
              v-if="row.status == 1"
              @confirm="cancelCollect(row.id)"
            >
              <template #reference>
                <img src="@/assets/collect.svg" alt="" style="width: 35px; height: auto" />
              </template>
            </el-popconfirm>
            <img
              src="@/assets/uncollect.svg"
              alt=""
              style="width: 35px; height: auto"
              v-else
              @click="onCollect(row.id)"
            />
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        :current-page="filter.page"
        :page-size="filter.pageSize"
        layout="total, prev, pager, next, slot, jumper"
        :total="foodTotal"
        @current-change="changePage"
      >
        <el-select style="width: 95px" v-model="filter.pageSize" @change="changePageSize">
          <el-option label="6条/页" :value="6"></el-option>
          <el-option label="10条/页" :value="10"></el-option>
          <el-option label="15条/页" :value="15"></el-option>
        </el-select>
      </el-pagination>
    </el-card>
  </div>
</template>

<style scoped lang="less">
.page-container {
  width: 100%;
  height: 100%;
  box-sizing: border-box; /* 确保内边距和边框不会增加元素的总宽度和高度 */
  padding: 20px;

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px; /* 添加内边距 */
    box-sizing: border-box; /* 确保内边距不会增加元素的总宽度和高度 */
  }

  .el-card {
    margin: 10px; /* 添加外边距 */
    box-sizing: border-box; /* 确保外边距不会增加元素的总宽度和高度 */
  }

  .el-table {
    box-sizing: border-box; /* 确保内边距不会增加元素的总宽度和高度 */

    ::v-deep(.el-table__header th) {
      background-color: rgb(237, 237, 237, 0.9);
      color: rgb(43, 37, 37);
      padding: 10px 0;
    }

    ::v-deep(.el-table__body tr) {
      height: 50px;
    }
  }

  .el-pagination {
    display: flex;
    justify-content: flex-end;
    margin: 10px 0px;
  }
}
</style>
